<template>
    <div>
        <!--查询条件start --111s-->
        <el-form :inline="true"
                 :model="query"
                 class="query-form"
                 size="small">
            <!-- <el-form-item>
                <el-button type="primary"
                            icon="el-icon-edit"
                            @click.native="showDialogAddOrEdit(null,null)">添加
                </el-button>
            </el-form-item> -->

            <el-form-item class="query-form-item">
                <el-input v-model="query.searchtext"
                          placeholder="商城名称/商城ID"
                          prefix-icon="el-icon-search"
                          @keyup.enter.native="onSubmit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item class="query-form-item">
                <el-select v-model="query.type" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in ['全部','申请中','已拒绝','已通过']"
                        :key="index"
                        :label="item"
                        :value="index">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-refresh"
                           @click="onRest"></el-button>
                <el-button type="primary"
                           icon="el-icon-search"
                           @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--查询条件end-->

        <!--列表start --->
        <el-table ref="multipleTable"
                  v-loading="loading"
                  :data="list"
                  :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                  @selection-change="handleSelectionChange"
                  border>
            <!-- <el-table-column type="selection"
                                width="40"
                                fixed /> -->
            <el-table-column label="序号" prop="commodityname" width="50" align="center">
                <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="ID" prop="usermobile" align="center"/>
            <el-table-column label="商城名称" prop="usermobile" align="center"/>
            <el-table-column label="商城等级"
                             :show-overflow-tooltip="true"
                             align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.busCommodity.commodityname}}</span>
                </template>
            </el-table-column>
            <el-table-column label="业绩"  prop="usernick" align="center"/>
            <el-table-column label="状态"  prop="usernick" align="center"/>
            <el-table-column label="操作"
                             width="250"
                             align="center">
                <template slot-scope="scope">
                    <el-button type="primary"
                               size="mini"
                               @click.native="showDialogAddOrEdit(scope.row)">查看</el-button>
                    <el-button type="primary"
                               size="mini"
                               @click.native="passTheAudit(scope.row)">通过</el-button>
                    <el-button type="danger"
                               size="mini"
                               @click.native="rejectionOfAudit(scope.row)">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--列表end --222e-->

        <!--全选删除start-->
        <!-- <div class="left-container">
            <el-button type="danger"
                        size="small"
                        @click="delGroup()">删除已选</el-button>
            <transition name="el-fade-in-linear">
                <el-button size="small"
                            @click="toggleSelection()"
                            v-show="cancelToggle">取消选择</el-button>
            </transition>
        </div> -->
        <!--全选删除end-->

        <!--分页模块start-->
        <el-pagination class="pagination-container"
                       background
                       :page-size="query.pageSize"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       :current-page="query.currentPage"
                       :page-sizes="[10, 20, 30, 50]"
                       :total="totalNumber"></el-pagination>
        <!--分页模块end-->

        <!--新增/编辑弹框start--333s-->
        <el-dialog title="合伙人成员表"
                   :visible.sync="dialogAddOrEdit"
                   width="80%"
                   :before-close="hideDialogAddOrEdit">
            <el-form :model="checkQuery"
                     :rules="rules"
                     ref="ruleForm"
                     class="demo-ruleForm"
                     size="small">

                <el-form-item
                    prop="userId">
                    <el-input v-model="checkQuery.searchtext" style="width:400px;margin-right: 20px;" placeholder="成员级别" clearable></el-input>
                    <el-button type="primary"
                               icon="el-icon-search"
                               @click="onCheckSubmit">查询</el-button>
                    <!-- <el-select v-model="formData.userId"
                                placeholder="订单编号"
                                clearable
                                @change="getAllPurchaseOrdersList()">
                        <el-option v-for="item in merchantslist"
                                    :key="item.userId"
                                    :label="item.usernick"
                                    :value="item.userId">
                        </el-option>
                    </el-select> -->
                </el-form-item>

                <!--列表start --->
                <el-table ref="merchantsgoodslist"
                          v-loading="checkLoading"
                          :data="merchantsgoodslist"
                          :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                          @selection-change="checkHandleSelectionChange"
                          border>
                    <!-- <el-table-column type="selection"
                                        width="50"
                                        fixed /> -->
                    <el-table-column label="序号"
                                     prop="commodityid"
                                     width="100"
                                     align="center">
                        <template slot-scope="scope">
                            <span>{{scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="成员级别"
                                     prop="commodityid"
                                     align="center" />
                    <el-table-column label="成员姓名"
                                     prop="commodityid"
                                     align="center">
                        <template slot-scope="scope">
                            <i class="el-icon-time"
                               v-if="scope.row.createtime!=null"></i>
                            <span v-if="scope.row.createtime!=null">{{ scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="当前等级"
                                     prop="commodityid"
                                     align="center" />
                    <el-table-column label="业绩"
                                     prop="commodityid"
                                     align="center" />
                </el-table>
                <!--分页模块start-->
                <el-pagination class="pagination-container"
                               background
                               :page-size="checkQuery.pageSize"
                               @size-change="checkHandleSizeChange"
                               @current-change="checkHandleCurrentChange"
                               layout="total,sizes,prev, pager, next, jumper"
                               :current-page="checkQuery.currentPage"
                               :page-sizes="[10, 20, 30, 50]"
                               :total="checkTotalNumber"></el-pagination>
                <!--分页模块end-->
                <!-- <el-form-item label="商品"
                                prop="ids">
                    <el-select v-model="formData.ids"
                                placeholder="请选择"
                                clearable>
                    <el-option v-for="(item,index) in merchantsgoodslist"
                                :key="index"
                                :label="item.commodityname"
                                :value="item.commodityid">
                    </el-option>
                    </el-select>
                </el-form-item> -->

                <!--        <el-form-item>-->
                <!--          <div slot="tip"-->
                <!--               class="el-upload__tip">只能上传jpg/png文件</div>-->
                <!--          <el-upload class="upload-demo"-->
                <!--                     :action="uploadUrl"-->
                <!--                     :on-change="handleChange"-->
                <!--                     multiple-->
                <!--                     :limit="1"-->
                <!--                     :on-success="handleSuccess"-->
                <!--                     :file-list="uploadData">-->
                <!--            <el-button size="small"-->
                <!--                       type="primary">点击上传</el-button>-->
                <!--          </el-upload>-->

                <!--        </el-form-item>-->

            </el-form>
            <span slot="footer" style="margin-right:auto;">
                <!-- <el-button @click="closeCheck">取 消</el-button> -->
                <!-- <el-button type="primary"
                            :disabled="merchantsgoodslist.length == 0"
                            :loading="formSumbitLoding"
                            @click="formSumbit">提 交</el-button> -->
            </span>
        </el-dialog>
        <!-- 添加孵化团队 -->
        <el-dialog title="新增孵化团队" type="center" :visible.sync="addIncubationTeam">
            <el-form :model="addForm" :rules="addRules" ref="addForm">
                <el-form-item label="添加孵化团队账号：" prop="name">
                    <el-input v-model="addForm.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAddTeam('addForm')">取 消</el-button>
                <el-button type="primary" @click="addTeam('addForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        getPickUpCommdityPage,
        deleteDailyNew,
        batchAddDailyNew,
        getAllPurchaseOrdersList
    } from "../../api/activityCommodity/activityCommodity.js";
    import {BASE_URL} from "../../config/app";
    /*用作表单的数据初始化*/
    const formJson = {
        ids: ""
    };

    export default {
        components: {},
        data() {
            return {
                uploadUrl: BASE_URL + '/goldendays-currency/tool/uploadpro', //上传图片
                uploadData: [],
                query: {
                    currentPage: 1,
                    searchtext: "",
                    pageSize: 10,
                    type: 0
                },
                addForm: {
                    name: null
                },
                checkQuery: {
                    currentPage: 1,
                    pageSize: 10,
                    commodityid: null,
                    searchtext: null
                },
                commodityIdArr: [],
                checkTotalNumber: 0, //分页总页数
                formName: null,
                formMap: {
                    add: "添加",
                    edit: "编辑"
                },
                merchantslist: [],
                merchantsgoodslist: [],
                list: [], //列表集合
                totalNumber: 0, //分页总页数
                loading: true, //列表加载
                checkLoading: false,
                formSumbitLoding: false, //表单提交加载
                cancelToggle: false, //列表是否全选
                multipleSelection: [], //多选集合
                dialogAddOrEdit: false, //新增或编辑弹框开关
                dialogAddOrEditName: "", //新增或编辑弹框名字
                formData: formJson, //新增或修改的对象
                rules: {
                    ids: {
                        required: true,
                        message: "请选择商品",
                        trigger: "blur"
                    }
                },
                addRules: {
                    name: {
                        required: true,
                        message: "请输入孵化团队账号",
                        trigger: "blur"
                    }
                },
                addIncubationTeam: false // 添加孵化团队
            };
        },

        methods: {
            //上传图片
            handleSuccess(response, file) {
                this.isSelect = false;
                console.log("上传成功");
                if (response.status === 1) {
                    const filePath = response.data;
                    this.formData.topcategorypic = filePath;
                    console.info(filePath + file);
                    //  alert(JSON.stringify(this.uploadData));
                    return;
                }

                this.$message.error("上传文件报错");
            },
            handleChange(file) {
                this.fileName = file.name ? file.name : "";
                return false;
            },

            /*获取列表事件*/
            getPickUpCommdityPage() {
                this.loading = true;
                //   getTopList
                getPickUpCommdityPage(this.query)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.loading = false;
                            return false;
                        }
                        console.log(response);
                        this.list = response.data.list || [];
                        this.totalNumber = response.data.totalNumber || 0;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                    });
            },

            /*新增或者编辑提交事件*/
            formSumbit() {
                //表单校验通过
                let commodityIds = this.commodityIdArr.toString();
                this.formData.commodityIds = commodityIds;
                console.info(this.formData);
                this.$refs["ruleForm"].validate(valid => {
                    // console.log(valid)
                    if (valid) {
                        this.formSumbitLoding = true;
                        this.formData.inputdata = JSON.stringify(this.formData);
                        batchAddDailyNew(this.formData)
                            .then(response => {
                                this.formSumbitLoding = false;
                                if (response.code != 0) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.merchantsgoodslist = [];
                                this.checkTotalNumber = 0;
                                this.$message.success("操作成功");
                                this.hideDialogAddOrEdit();
                                // 加载表格数据
                                this.getPickUpCommdityPage();
                            })
                            .catch(() => {
                                this.formSumbitLoding = false;
                            });
                    }
                });
                //new URLSearchParams(this.query)  提交数据格式不正确时可以转一下
            },

            closeCheck() {
                this.dialogAddOrEdit = false;
                this.merchantsgoodslist = [];
                this.checkTotalNumber = 0;
            },
            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.getPickUpCommdityPage();
            },

            /*刷新*/
            onRest() {
                //刷新事件需要重置查询条件
                this.query = {
                    currentPage: 1,
                    pageSize: 10
                };
                this.getPickUpCommdityPage();
            },

            //显示 查看弹框
            detailForm(index, row) {
                if (row !== null) {
                    console.info(row);
                    this.dialogAddOrEdit = true;
                    this.formData = Object.assign({}, row);
                    let data = {
                        name: "",
                        url: ""
                    };
                    if (row.topcategorypic) {
                        this.uploadData = [];
                        let nameurl = row.topcategorypic;
                        data.url = nameurl;
                        data.name = nameurl.substring(nameurl.lastIndexOf("/") + 1);
                        this.uploadData.push(data);
                    }
                    this.dialogAddOrEditName = "编辑";
                }
            },

            /*显示 -新增或者编辑弹框*/
            showDialogAddOrEdit(row) {
                console.log(row);
                this.checkQuery.userid = row.userid;
                this.checkQuery.commodityid = row.commodityid;
                this.formData = Object.assign({}, formJson);
                this.dialogAddOrEdit = true;
                this.getAllPurchaseOrdersList();
            },

            // 通过审核
            passTheAudit(row) {
                console.log(row);
                this.$confirm("确定要通过吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$message.success("已经通过审核！！！");
                    })
                    .catch(() => {
                        this.$message.error("已取消！！！");
                    });
            },

            // 驳回审核
            rejectionOfAudit(row) {
                console.log(row);
                this.$confirm(
                    "驳回审核后，则不能被再次审核，确定驳回吗？",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                )
                    .then(() => {
                        this.$message.success("已驳回审核！！！");
                    })
                    .catch(() => {
                        this.$message.error("已取消！！！");
                    });
            },

            /*隐藏 -新增或编辑弹框*/
            hideDialogAddOrEdit() {
                this.dialogAddOrEdit = false;
                this.merchantsgoodslist = [];
                //隐藏弹框时需要清除弹框内容
                if (this.$refs["ruleForm"]) {
                    this.$refs["ruleForm"].resetFields(); //清除formData表单
                    this.$refs["ruleForm"].clearValidate(); //清除表单验证
                }
                //如果上传文件，还需要清除文件列表
            },
            getAllPurchaseOrdersList() {
                getAllPurchaseOrdersList(this.checkQuery)
                    .then(response => {
                        console.log(response);
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.checkLoading = false;
                            return false;
                        }
                        this.checkLoading = false;
                        this.checkTotalNumber = response.data.totalNumber || 0;
                        this.merchantsgoodslist = response.data.list || [];
                        console.log(this.merchantsgoodslist);
                    })
                    .catch(() => {
                        this.checkLoading = false;
                        this.merchantsgoodslist = [];
                    });
            },

            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getPickUpCommdityPage();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getPickUpCommdityPage();
            },
            /*弹窗 列表查询条件事件*/
            onCheckSubmit() {
                this.query.currentPage = 1;
                this.getAllPurchaseOrdersList();
            },
            /*弹窗 选择每页条数【10,20,30,40,50】*/
            checkHandleSizeChange(val) {
                this.checkQuery.pageSize = val;
                this.getAllPurchaseOrdersList(); // 重新查询列表
            },
            /*弹窗 点击页数*/
            checkHandleCurrentChange(val) {
                this.checkQuery.currentPage = val;
                this.getAllPurchaseOrdersList(); // 重新查询列表
            },
            /*弹窗 列表复选框选择事件*/
            checkHandleSelectionChange(val) {
                console.log(val);
                let arr = [];
                val.forEach((value, index) => {
                    console.log(index);
                    arr.push(value.commodityid);
                });
                this.commodityIdArr = arr;
            },
            /*取消全选事件*/
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            /*列表复选框选择事件*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if (val == "") {
                    this.cancelToggle = false;
                    return;
                }
                this.cancelToggle = true;
            },

            /*全选删除事件*/
            delGroup() {
                console.log(this.multipleSelection);
                var ids = this.multipleSelection
                    .map(item => item.dailynewid)
                    .join(); //获取所有选中行的id组成的字符串，以逗号分隔
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }
                this.handleDel(ids);
            },

            /*单击删除事件*/
            handleDel(ids) {
                if (ids) {
                    this.$confirm("确认要删除吗?", "提示", {
                        type: "warning"
                    })
                        .then(() => {
                            this.loading = true;
                            var params = new URLSearchParams();
                            params.append("dailyNewIds", ids);
                            deleteDailyNew(params)
                                .then(response => {
                                    this.loading = false;
                                    if (response.code) {
                                        this.$message.error(response.message);
                                        return false;
                                    }
                                    this.$message.success("删除成功");
                                    // 刷新数据
                                    //this.list.splice(index, 1);
                                    this.getPickUpCommdityPage();
                                })
                                .catch(() => {
                                    this.loading = false;
                                });
                        })
                        .catch(() => {
                            this.$message.warning("已取消");
                        });
                }
            },
            // 确认添加孵化对团
            addTeam(form) {
                this.$refs[form].validate(valid => {
                    if (valid) {
                        console.log("添加！");
                    }
                });
            },
            // 取消添加 表单重置
            cancelAddTeam(form) {
                this.addIncubationTeam = false;
                this.$refs[form].resetFields();
            }
        },
        created() {
            this.getPickUpCommdityPage();
        }
    };
</script>
<style lang="scss"  scoped>
</style>
